<template>
    <!-- 分割线组件 -->
    <el-divider content-position="left">
        <h2> 用户管理</h2>
    </el-divider>
    
    
    <!-- 表格组件 -->
    <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
        <el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
        <el-table-column prop="user_nick_name" label="昵称"></el-table-column>
        <el-table-column label="账号">
            <template #default="scope">
                <el-icon :size="20" :color="`skyblue`">
                    <UserFilled />
                </el-icon>
               <span style="vertical-align: middle;"> {{ scope.row.user_acc }}</span>
            </template>
        </el-table-column>
        <el-table-column label="头像(查看大图)" align="center">
            <template #default="scope">
                <el-image class="table-td-thumb" :src="scope.row.user_picUrl" 
                    :z-index="10" :preview-src-list="[scope.row.user_picUrl]"
                    preview-teleported>
                </el-image>
            </template>
        </el-table-column>
        <el-table-column prop="user_address" label="地址"></el-table-column>
        <el-table-column label="性别" align="center">
            <template #default="scope">
                <el-tag :type="scope.row.user_sex === '男' ? 'success' : scope.row.user_sex === '女' ? 'danger' : ''">
                    {{ scope.row.user_sex == null? '未知': scope.row.user_sex }}
                </el-tag>
            </template>
        </el-table-column>

        <el-table-column prop="user_age" label="年龄"></el-table-column>
        <!-- <el-table-column prop="user_create_time" label="注册时间"></el-table-column> -->

        <el-table-column label="注册时间">
            <template #default="scope">{{ formatime(scope.row.user_create_time) }}</template>
        </el-table-column>


        <el-table-column label="操作" width="220" align="center">
            <template #default="scope">
                <el-button text :icon="Delete" class="red" @click="handleDelete(scope.$index, scope.row.user_id,scope.row.user_nick_name)">
                    删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <div class="pagination">
        <el-pagination 
        background 
        layout="total, prev, pager, next" 
        :current-page="query.pageIndex"
        :page-size="query.pageSize" 
        :total="pageTotal" 
        @current-change="handlePageChange"></el-pagination>
    </div>
</template>

<script lang="ts" setup>
// 导入相关的API或组件
import { ref, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Delete,UserFilled } from '@element-plus/icons-vue';
import { userListFunc , deleteUserFunc } from '../../api/index';
import moment from 'moment'

// 定义表格对象的接口（规范）
interface TableItem {
    id?: number;
    user_id: string;
    user_acc: string;
    user_pwd: string;
    user_nick_name: string;
    user_create_time?: string | Date;
    user_picUrl?: string;
    user_age?: number;
    user_sex?: boolean | string;
    user_address?: string;
}

// 分页
const query = reactive({
    pageIndex: 1,
    pageSize: 5
});
// 记录表格的数据
const tableData: any = ref<TableItem[]>([]);
// console.log(tableData)
// 统计页数
const pageTotal = ref(0);

// 获取表格数据
const getData = async (page=1,pageSize=5) => {
    await userListFunc({page,pageSize}).then((content: any) => {
        // console.log("1.0",content)
        let {result, code , msg , total} = content;
        // console.log(result)
        if(code ==200){
           // 循环添加用户
           let arr: any = [];
           result.forEach((user:TableItem )=>{
              arr.push(user)
           })
           tableData.value = arr;
           // 设置分页的数量
           pageTotal.value = total;
        }
        else {
            ElMessage.error(msg);
        }
    });
};

getData();

// 查询操作
// const handleSearch = () => {
//     query.pageIndex = 1;
//     getData();
// };

// 分页导航
const handlePageChange = (page: number) => {
    query.pageIndex = page;
    // 分页
    getData(page);
};

// 删除操作
const handleDelete = (index: number, user_id:string,user_nick_name:string) => {
    // 二次确认删除
    ElMessageBox.confirm(`确定要删除“${user_nick_name}”吗？`, '提示', {
        type: 'warning'
    })
        .then(() => {
            // 删除数据
            deleteUserFunc({user_id})
            .then(
                (content: any)=>{
                    ElMessage.success(content.msg);
                    tableData.value.splice(index, 1);
                    // 重新初始化
                    getData();
                },
                err=>{
                    ElMessage.error(err.msg);
                }
            )
           

          
        })
        .catch(() => { });
};


// 过滤器
const formatime = (value:string | any)=>{
    return moment(value).format('YY-MM-DD hh:mm:ss');
}

</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
}

.table {
    width: 100%;
    font-size: 14px;
}

.red {
    color: #F56C6C;
}

.mr10 {
    margin-right: 10px;
}

.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>
